<div fxFlexFill>
  <div class="card-panel">
    <span>
      <b>{{'品牌权限管理'|translate}}：</b>{{'目前您已监控'|translate}}<b class="red-text">{{vm.table.count}}/{{user.activeVersionInfo.brandCount}}</b>{{"个品牌。"|translate}}
    </span>
  </div>
  <div class="container" style="position: relative;">
    <ngx-busy [busy]="busy"></ngx-busy>
    <div class="clearfix">
      <div class="left">
        <en-mark></en-mark>
      </div>
      <div class="right">
        <a mat-raised-button color="primary" (click)="add()" *ngIf="!addView">
          {{'添加' |translate}}<i class="fa fa fa-plus pl5"></i>
        </a>
        <a mat-raised-button color="primary" (click)="add()" *ngIf="addView">
          <i class="fa fa-angle-left pr5" style="vertical-align: baseline;"></i>{{'返回' |translate}}
        </a>
        <a mat-raised-button color="primary" (click)="export()" *ngIf="!addView">
          {{'下载'|translate}}
        </a>
      </div>
    </div>
    <div class="table-view" [hidden]="addView">
      <table class="responsive-table bordered highlight">
        <thead>
          <tr>
            <th *ngFor="let column of columns;let $index = index;" st-sort [st-sort]="column" [st-sort-data]="param" (sortChanged)="sortChange($event)" [ngClass]="column.class" [innerHTML]="column.title |translate" [title]="column.title |translate"> </th>
            <th>{{'监控'|translate}}</th>
          </tr>
        </thead>
        <tbody>
          <tr class="repeat-item" *ngFor="let brand of vm.table.brands  | paginate: { itemsPerPage: 10, currentPage: p,id:'brands_table'};let $index = index;">
            <td>
              <a *ngIf="brand.brandName" class="brandLink text-overflow.width180" href="javascript:;" goDetail [title]="brand.brandName" [data]="brand" type="monitorBrandDetail" [innerHTML]="brand.brandName | highlight:param.brandNameSearch"></a>
              <a *ngIf="!brand.brandName">{{'该品牌已失效'|translate}}</a>
            </td>
            <td>{{brand.categoryName | categoryName}}</td>
            <td>{{brand.shopNum | number:0}}</td>
            <td>{{brand.productNum | number:0}}</td>
            <!-- 日销量 -->
            <td><span class="tm-yen">¥</span>{{brand.sellMoney | bigNum}}</td>
            <td>{{brand.sellAmount||0 | number:0}}</td>
            <!-- 月销 -->
            <td><span class="tm-yen">¥</span>{{brand.monthSellMoney | bigNum}}</td>
            <td>{{brand.monthSellAmount||0 | number:0}}</td>
            <td>
              <monitor-slide-toggel type="brand" [data]="brand" [checked]="true"></monitor-slide-toggel>
            </td>
          </tr>
          <tr *ngIf="vm.table.brands.length==0">
            <td colspan="9" class="center-align">
              <span>{{'暂无品牌监控'|translate}}&nbsp;
                <a md-raised-button color="primary" (click)="add()">{{'立即添加'|translate}}</a>
              </span>
            </td>
          </tr>
        </tbody>
      </table>
      <pagination-controls class="center-align pt20" id="brands_table" (pageChange)="p = $event" maxSize="9" directionLinks="true" autoHide="true">
      </pagination-controls>
    </div>
    <div class="add-view" *ngIf="addView">
      <monitor-add type="brand"></monitor-add>
    </div>
  </div>
</div>
